@import "global";

#word-list {
    margin-top: 3.125em;
    width: 37.500em;
    @include center;
}

#word-list a {
    color: #444;
}

#word-list a:hover {
    color: #444;
}

#container {
    p {
        font-family: "Montserrat";
        text-align: center;
        font-size: 1.3em;
        color: #111;
    }
}

.post-name {
    font-size: 40;
    font-family: "Montserrat";
    font-weight: 700;
}

.post-date {
    font-size: 1.250em;
    font-family: "Montserrat";
    display: inline;
    color: #aaa;
    float: right;
}

#word-title {
    font-size: 1.875em;
    font-family: "Roboto";
    text-align: center;
    font-weight: 700;
    color: #444;
    padding-bottom: 0.625em;
}

.post {
    overflow: hidden;
    padding: 1.625em 1.875em 1.625em 1.875em;
    margin-bottom: 2.500em;
}

.post:hover {
    background: #fafafd;
    outline: 0.063em solid #dedede;
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {

    div {
        clear:both!important;
        display:block!important;
        width:100%!important;
        float:none!important;
        margin:0!important;
        padding:0!important;
    }

    #word-title {
        font-size: 600%;
        font-family: Montserrat;
        margin-bottom: 1em !important;
    }

    .post-name {
        font-size: 600% !important;
        font-family: Montserrat;
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .post-date {
        font-size: 300%;
        margin-top: 0.8em !important;
        margin-bottom: 3em !important;
        margin-left: 55% !important;
    }


}
